﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateContact.aspx.cs"
    Inherits="WebAddressBook.CreateContact" %>

<%@ Register Src="~/HeaderControl.ascx" TagName="HeaderControl" TagPrefix="uc1" %>
<%@ Register Src="~/CoypyrightControl.ascx" TagName="CoypyrightControl" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="shortcut icon" type="image/png" href="img/favicons/favicon.png" />
    <link rel="icon" type="image/png" href="img/favicons/favicon.png" />
    <link rel="apple-touch-icon" href="img/favicons/apple.png" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!-- Your Custom Stylesheet -->
    <link rel="stylesheet" href="css/custom.css" type="text/css" />
    <link href="Jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Jcrop/js/jquery.min.js"></script>
    <script src="Jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
    <!-- Internet Explorer Fixes -->
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" media="all" href="css/ie.css"/>
    <script src="js/html5.js"></script>
    <![endif]-->
    <!--Upgrade MSIE5.5-7 to be compatible with MSIE8: http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js -->
    <!--[if lt IE 8]>
    <script src="js/IE8.js"></script>
    <![endif]-->
    <script type="text/javascript">

        //Jcrop的官方例子是如下这样写的
//        jQuery(document).ready(function () {
//            //jQuery('#imgCrop').Jcrop这样写对非ie起作用，对ie经常不起作用
//            jQuery('#imgCrop').Jcrop({
//                onSelect: storeCoords,
//                aspectRatio: 1,
//                onChange: storeCoords
//                //onRelease: storeCoords
//            });
//            //$.Jcrop这样写对ie起作用，却对chrome不起作用
//            var api = $.Jcrop('#imgCrop', {
//                aspectRatio: 1,
//                onSelect: storeCoords
//                //onChange: storeCoords,
//                //onRelease: storeCoords
//            });
//        });

        function storeCoords(c) {
            jQuery('#X').val(c.x);
            jQuery('#Y').val(c.y);
            jQuery('#W').val(c.w);
            jQuery('#H').val(c.h);
        };

        //通过另外一种途径去执行这个jQuery的方法
        var isStart = 0;
        function startLoadCrop() {
            if (isStart < 5)
                jQuery('#imgCrop').Jcrop({
                    onSelect: storeCoords,
                    aspectRatio: 1,
                    onChange: storeCoords
                    //onRelease: storeCoords
                });
                isStart++;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <!-- Header -->
    <uc1:HeaderControl ID="HeaderControl1" runat="server" />
    <!-- End of Header -->
    <!-- Page title -->
    <div id="pagetitle">
        <div class="wrapper">
            <h1>
                添加联系人</h1>
            <!-- Quick search box -->
        </div>
    </div>
    <!-- Page content -->
    <div id="page">
        <!-- Wrapper -->
        <div class="wrapper" onmousemove="startLoadCrop()">
            <!-- Left column/section -->
            <section class="column full first">					
                            <fieldset>
							<legend>添加联系人</legend>
                            <p>
                                <label class="required" for="enterprise">所属企业:</label><br/>
                                <asp:DropDownList ID="DDLEnterprise" runat="server" CssClass="half" 
                                    AutoPostBack="True" onselectedindexchanged="DDLEnterprise_SelectedIndexChanged"></asp:DropDownList>
                            </p>

                            <p>
                                <label class="required" for="deptment">所属部门:</label><br/>
                                <asp:DropDownList ID="DDLDept" runat="server" CssClass="half"></asp:DropDownList>
                            </p>

							<p>
								<label class="required" for="firstname">姓:</label><br/>
								<input type="text" id="firstname" class="half" runat="server" value="" name="firstname"/>
							</p>

							<p>
								<label class="required" for="lastname">名:</label><br/>
								<input type="text" id="lastname" class="half" runat="server" value="" name="lastname"/>
							</p>

                            <p>
								<label class="required" for="RBsex">性别:</label>
                                <p />
								<asp:RadioButtonList ID="RBsex" runat="server" RepeatDirection="Horizontal">
                                    <asp:ListItem Selected="True" Value="true">男</asp:ListItem>
                                    <asp:ListItem Value="false">女</asp:ListItem>
                                </asp:RadioButtonList>
							</p>

                            <p>
								<label class="required" for="phone">手机号码:</label><br/>
								<input type="text" id="phone" class="half" runat="server" value="" name="phone"/>
							</p>

                            <p>
								<label>办公座机:</label><br/>
								<input type="text" id="tel" class="half" runat="server" value="" name="tel"/>
							</p>

                            <p>
								<label>家庭电话:</label><br/>
								<input type="text" id="famirytel" class="half" runat="server" value="" name="famirytel"/>
							</p>

                            <p>
								<label>传真:</label><br/>
								<input type="text" id="fax" class="half" runat="server" value="" name="fax"/>
							</p>

                            <p>
								<label>邮箱:</label><br/>
								<input type="text" id="email" class="half" runat="server" value="" name="email"/>
							</p>

                            <p>
								<label>职位:</label><br/>
								<input type="text" id="station" class="half" runat="server" value="" name="station"/>
							</p>

                            <p>
								<label>地址:</label><br/>
								<input type="text" id="address" class="half" runat="server" value="" name="address"/>
							</p>
                            <p>
								<label>头像:</label>
							</p>
                            <div>
                            <table width="50%">
                            <tr>
                            <td>
                            <div class="photocontainer">
                            <asp:Image ID="imgCropped" runat="server" ImageUrl="img/man.gif" Width="120px" Height="120px" />
                            </div>
                            </td>
                            <td>
                            <asp:FileUpload ID="Upload" runat="server" CssClass="full"></asp:FileUpload>
                            </td>
                            <td>
                            <asp:Button ID="BtUpload" runat="server" Text="上传" CssClass="btn btn-blue" 
                                    onclick="BtUpload_Click"></asp:Button>
                            </td>
                            </tr>
                            </table>
                            </div>
<%--                            <div id="srcImgDiv" runat="server">--%>
                            <table>
                            <tr>
                            <td>
                                <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                                    <asp:Image ID="imgCrop" runat="server" Width="680px" Height="480px"/>
                                    <br />
                                    <asp:Button ID="btnCrop" runat="server" Text="裁剪" onclick="btnCrop_Click" CssClass="btn btn-blue" />
                                    <br />
                                    <asp:HiddenField ID="X" runat="server" />
                                    <asp:HiddenField ID="Y" runat="server" />
                                    <asp:HiddenField ID="W" runat="server" />
                                    <asp:HiddenField ID="H" runat="server" />
                                    <asp:HiddenField ID="HFGuid" runat="server" Value=""/>
                                </asp:Panel>
                            </td>
                            <td>
<%--                            <asp:Button ID="btnCrop" runat="server" Text="裁剪" onclick="btnCrop_Click" CssClass="btn btn-blue" />
--%>                            </td>
                            </tr>
                            </table>
<%--                            </div>--%>
					        <p>
                             <asp:Label ID="LbMessage" runat="server" Text=""></asp:Label>   
                            </p>
							<p>
                                <asp:Button ID="BtCreate" runat="server" Text="创建" CssClass="btn btn-blue" 
                                    onclick="BtCreate_Click"></asp:Button>
                            </p>
						</fieldset>
           </section>
        </div>
        <!-- End of Wrapper -->
    </div>
    <!-- End of Page content -->
    <!-- Page footer -->
    <div>
        <uc2:CoypyrightControl ID="CoypyrightControl1" runat="server" />
    </div>
    <!--End Page footer -->
    </form>
</body>
</html>
